<template>
  <div class="order-multi-step">
    <el-steps :active="step" finish-status="success" align-center>
      <el-step title="用户信息"/>
      <el-step title="选择服务"/>
      <el-step title="确认下单"/>
      <el-step title="完成"/>
    </el-steps>
    <div v-if="step === 0">
      <Step1UserInfo v-model="orderData.userInfo" @next="nextStep"/>
    </div>
    <div v-else-if="step === 1">
      <Step2ServiceSelect v-model="orderData.serviceInfo" @next="nextStep" @prev="prevStep"/>
    </div>
    <div v-else-if="step === 2">
      <Step3Confirm :orderData="orderData" @submit="submitOrder" @prev="prevStep"/>
    </div>
    <div v-else>
      <Step4Success :orderId="createdOrderId"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Step1UserInfo from './steps/Step1UserInfo.vue'
import Step2ServiceSelect from './steps/Step2ServiceSelect.vue'
import Step3Confirm from './steps/Step3Confirm.vue'
import Step4Success from './steps/Step4Success.vue'
import { createOrder } from '@/api/order'
import { ElMessage } from 'element-plus'

const step = ref(0)
const orderData = ref({
  userInfo: {},
  serviceInfo: {}
})
const createdOrderId = ref(null)

function nextStep() {
  step.value++
}
function prevStep() {
  step.value--
}
async function submitOrder() {
  try {
    const payload = {
      ...orderData.value.userInfo,
      ...orderData.value.serviceInfo
    }
    const res = await createOrder(payload)
    createdOrderId.value = res.data.orderId || res.data.id
    nextStep()
  } catch (e) {
    ElMessage.error('下单失败，请重试')
  }
}
</script> 